import * as React from 'react'
import * as ReactDOM from 'react-dom'

class Loading extends React.Component<any, any> {

    public state = {
        visible: true
    }

    private node: HTMLDivElement

    public constructor(props: any) {
        super(props)
        this.node = document.createElement('div')
        this.node.className = 'mk_loading'
        document.body.appendChild(this.node)
    }

    public componentWillUnmount() {
        document.body.removeChild(this.node)
    }

    public pulse = () => {
        const node = (
            <div className="mk_loading_mask">
                <div className="la-ball-clip-rotate-pulse la-dark">
                    <div />
                    <div />
                </div>
            </div>
        )
        ReactDOM.render(node, this.node)
    }

    public hide = () => {
        ReactDOM.render(<div />, this.node)
    }
}

const load = new Loading({})

const loading = {
    hide: load.hide,
    pulse: load.pulse
}

export default loading